<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >

      <el-form-item label="申诉日期" prop="appealDate">
        <el-date-picker
          v-model="queryParams.countDate"
          value-format="YYYY-MM-DD"
          type="date"
          :disabled-date="disabledDate"
          :shortcuts="shortcuts"
          placeholder="请先选择申诉日期"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px"/>
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px"/>
          重置
        </el-button>
        <el-button
          type="success"
          plain
          @click="handleExport"
          :loading="exportLoading"
        >
          <Icon icon="ep:download" class="mr-5px"/>
          导出
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <div class="content_div">
    <!-- 总结描述信息 -->
    <ContentWrap>
      <div v-if="dayReportList.length > 0" v-loading="loading">
        <div class="content_div" style="font-weight: bold;">
          申诉中心运营情况工作日报（{{ queryParams.countDate }}）
        </div>
        <div class="content_div">当天申诉中心共接到申诉工单<span
          class="count_span">{{ reportData.orderCount }}</span>件，其中基础企业申诉工单<span
          class="count_span">{{ reportData.baseOrderCount }}</span>件、腾讯申诉工单<span
          class="count_span">{{ reportData.txOrderCount }}</span>件、长宽申诉工单<span
          class="count_span">{{ reportData.ckOrderCount }}</span>件、虚拟运营商申诉工单<span
          class="count_span">{{ reportData.xnOrderCount }}</span>件，超时处理工单<span
          class="count_span">{{ reportData.csOrderCount }}</span>件，当月累计收到基础企业工单<span
          class="count_span">{{ reportData.monthOrderCount }}</span>件。
        </div>
        <div class="content_div">一、基础企业申诉工单具体数据：</div>
        <div class="content_div">1、企业申诉来量及周环比变化：电信<span
          class="count_span">{{ reportData.weekDxOrderCount }}</span>件（<span
          class="count_span">{{ reportData.weekDxOrderCountChange }}</span>件）、移动<span
          class="count_span">{{ reportData.weekYdOrderCount }}</span>件（<span
          class="count_span">{{ reportData.weekYdOrderCountChange }}</span>件）、联通<span
          class="count_span">{{ reportData.weekLtOrderCount }}</span>件（<span
          class="count_span">{{ reportData.weekLtOrderCountChange }}</span>件）、广电<span
          class="count_span">{{ reportData.weekGdOrderCount }}</span>件(<span
          class="count_span">{{ reportData.weekGdOrderCountChange }}</span>件)；
        </div>
        <div class="content_div">2、周环比增长地市：<span v-for="(item, index) in reportData.top3City"
                                                        :key="index">{{ item['col0'] }}<span
          class="count_span">{{ item['col1'] }}</span>件（<span class="count_span">{{
            item['col12']
          }}</span>件）<span v-if="index !== 2">、</span></span>；
        </div>
        <div class="content_div">
          3、增长主要业务问题：<span v-for="(item, index) in reportData.top4Class"
                                   :key="index">{{ item['col0'] }}<span
          class="count_span">{{ item['col1'] }}</span>件（<span class="count_span">{{
            item['col3']
          }}</span>件）<span v-if="index !== 3">、</span></span>；
        </div>
      </div>
      <div v-else v-loading="loading">
        <!-- 暂无数据，文本内容居中展示 -->
        <div class="text-center"><span class="el-table__empty-text">暂无数据</span></div>
      </div>
    </ContentWrap>

    <!-- 累计报表 -->
    <ContentWrap>
      <el-table v-loading="loading" :data="dayReportList" :stripe="true"
                :show-overflow-tooltip="true">
        <el-table-column label="各运营企业申告数据占比情况" align="center">
          <el-table-column label="基础运营商" align="center">
            <el-table-column prop="col0" label="企业" align="center" width="210"/>
            <el-table-column prop="col1" label="全省" align="center"/>
            <el-table-column prop="col2" label="中国电信" align="center"/>
            <el-table-column prop="col3" label="中国移动" align="center"/>
            <el-table-column prop="col4" label="中国联通" align="center"/>
            <el-table-column prop="col5" label="中国广电" align="center"/>
          </el-table-column>
          <el-table-column label="其他企业" align="center">
            <el-table-column prop="col6" label="全省" align="center"/>
            <el-table-column prop="col7" label="腾讯公司" align="center"/>
            <el-table-column prop="col8" label="长宽公司" align="center"/>
            <el-table-column prop="col9" label="其他企业" align="center"/>
            <el-table-column prop="col10" label="虚拟运营商" align="center"/>
          </el-table-column>
        </el-table-column>
      </el-table>
    </ContentWrap>

    <!-- 地市维度报表 -->
    <ContentWrap>
      <el-table v-loading="loading" :data="cityReportList" :stripe="true"
                :show-overflow-tooltip="true">
        <el-table-column label="地市维度报表" align="center">
          <el-table-column prop="col0" label="地市" align="center"/>
          <el-table-column prop="col2" label="中国电信" align="center" sortable/>
          <el-table-column prop="col3" label="中国移动" align="center" sortable/>
          <el-table-column prop="col4" label="中国联通" align="center" sortable/>
          <el-table-column prop="col5" label="中国广电" align="center" sortable/>
          <el-table-column prop="col1" label="合计" align="center" sortable/>
          <el-table-column prop="col6" label="腾讯" align="center" sortable/>
          <el-table-column prop="col7" label="长宽" align="center" sortable/>
          <el-table-column prop="col8" label="其他企业" align="center" sortable/>
          <el-table-column prop="col9" label="虚商" align="center" sortable/>
          <el-table-column prop="col10" label="合计" align="center" sortable/>
          <el-table-column prop="col11" label="周环比量" align="center" sortable/>
          <el-table-column prop="col12" label="周环比变化" align="center" sortable/>
        </el-table-column>
      </el-table>
    </ContentWrap>

    <!-- 分类码二级报表 -->
    <ContentWrap>
      <el-table v-loading="loading" :data="classReportList" :stripe="true"
                :show-overflow-tooltip="true">
        <el-table-column label="分类码二维度报表" align="center">
          <el-table-column prop="col0" label="分类码二级" align="center"/>
          <el-table-column prop="col1" label="申诉量" align="center" sortable/>
          <el-table-column prop="col2" label="周环比量" align="center" sortable/>
          <el-table-column prop="col3" label="周环比变化" align="center" sortable/>
        </el-table-column>
      </el-table>
    </ContentWrap>
  </div>
</template>

<script setup lang="ts">
// import { dateFormatter } from '@/utils/formatTime'
// import download from '@/utils/download'
import {OrderListApi} from './index'
import html2pdf from 'html2pdf.js';

/** 工单清单 列表 */
defineOptions({name: 'DayWeekReport'})

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}

const message = useMessage() // 消息弹窗

// const {t} = useI18n() // 国际化

const loading = ref(false) // 列表的加载中

const dayReportList = ref([]) // 日报数据

const cityReportList = ref([]) // 地级市日报数据

const classReportList = ref([]) // 分类吗二日报数据

const reportData = reactive({
  orderCount: 0,
  baseOrderCount: 0,
  txOrderCount: 0,
  ckOrderCount: 0,
  xnOrderCount: 0,
  csOrderCount: 0,
  monthOrderCount: 0,
  weekDxOrderCount: 0,
  weekDxOrderCountChange: 0,
  weekYdOrderCount: 0,
  weekYdOrderCountChange: 0,
  weekLtOrderCount: 0,
  weekLtOrderCountChange: 0,
  weekGdOrderCount: 0,
  weekGdOrderCountChange: 0,
  top3City: [],
  top4Class: []
})

const queryParams = reactive({
  countDate: undefined
})

const queryFormRef = ref() // 搜索的表单

const exportLoading = ref(false) // 导出的加载中

/** 查询列表 */
const getDayReport = async () => {
  loading.value = true
  dayReportList.value = []
  cityReportList.value = []
  classReportList.value = []
  Object.assign({}, reportData)
  try {
    const data = await OrderListApi.getDayReport(queryParams)
    // console.log(data)
    dayReportList.value = data.dayReportList
    cityReportList.value = data.cityReportList
    classReportList.value = data.classReportList
    // 将 data.reportData 的值赋值给 reportData
    Object.assign(reportData, data.reportData)
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  // 判断申诉日期是否选择
  if (!queryParams.countDate) {
    message.warning('请选择申诉日期')
    return
  }
  getDayReport()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.countDate = undefined
  // 其它的表格数值也置空
  dayReportList.value = []
  cityReportList.value = []
  classReportList.value = []
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm();
    // 发起导出
    exportLoading.value = true;

    // 获取需要导出的HTML元素
    const element = document.querySelector('.content_div'); // 根据需要修改选择器

    // 使用html2pdf.js将HTML元素导出为PDF
    html2pdf().from(element).save('report.pdf');
  } catch {
  } finally {
    exportLoading.value = false;
  }
}

/** 初始化 **/
onMounted(() => {

})
</script>

<style scoped>
/** 设置 el-table 的表头文本不自动换行 */
::v-deep(.el-table th .cell) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.content_div {
  margin-top: 10px;
}

.text-center {
  text-align: center;
}

.count_span {
  color: #2d8cf0;
}
</style>
